<header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" {% if total_count > 0 and completed_count == total_count %}checked{% endif %}>
    <ul class="todo-list">
        {% for todo in todos %}
        <li class="{% if todo.checked %}completed{% endif %}">
            <div class="view">
                <input class="toggle" type="checkbox" data-todo-index="{{ forloop.counter0 }}" {% if todo.checked %}checked{% endif %}>
                <label>{{ todo.text }}</label>
                <button class="destroy" data-todo-index="{{ forloop.counter0 }}"></button>
            </div>
            <input class="edit" value="{{ todo.text }}">
        </li>
        {% endfor %}
    </ul>
</section>
<footer class="footer">
    <span class="todo-count"><strong>{{ active_count }}</strong> items left</span>
    <ul class="filters">
        <li class="todo-all"><a href="#" class="{% if state == 'all' %}selected{% endif %}">All</a></li>
        <li class="todo-active"><a href="#" class="{% if state == 'active' %}selected{% endif %}">Active</a></li>
        <li class="todo-completed"><a href="#" class="{% if state == 'completed' %}selected{% endif %}">Completed</a></li>
    </ul>
    {% if has_completed %}
    <button class="clear-completed">Clear completed</button>
    {% endif %}
</footer>